<!-- 
	视频组件 
	1、视频设置：视频链接地址、是否自定义封面：0 不自定义视频封面  1 自定义视频封面、视频封面地址
	2、视频内边距设置：上边距、下边距、左边距、右边距
-->
<template>
	<div class="component-wrapper" :style="wrapper_style">
		<video style="width: 100%;" :poster="videoUrl.isShowPoster == '0' ? '' : videoUrl.poster" :src="videoUrl.videoUrl"
			controls="controls">
		</video>
	</div>
</template>

<script>
	export default {
		name: 'u_video',
		props: {
			componentId: {
				type: String,
				default: ''
			},
			data: {
				type: Object,
				default () {
					return {
						// 视频设置
						"videoUrl": {
							//视频链接地址
							"videoUrl": {
								type: String,
								default: ''
							},
							// 是否自定义封面：0 不自定义视频封面  1 自定义视频封面
							"isShowPoster": {
								type: String,
								default: '0'
							},
							//视频封面地址
							"poster": {
								type: String,
								default: ''
							},
						},
						//上边距
						"paddingTop": {
							type: Number,
							default: 0
						},
						//下边距
						"paddingBottom": {
							type: Number,
							default: 0
						},
						//左边距
						"paddingLeft": {
							type: Number,
							default: 0
						},
						//右边距
						"paddingRight": {
							type: Number,
							default: 0
						}
					}
				}
			}
		},
		computed: {
			/** 样式 */
			wrapper_style() {
				const {
					paddingTop,
					paddingBottom,
					paddingLeft,
					paddingRight,
				} = this.data;
				return `
							line-height: 0;
			                padding-top: ${paddingTop}px;
			                padding-bottom: ${paddingBottom}px;
			                padding-left: ${paddingLeft}px;
			                padding-right: ${paddingRight}px;
			            `;
			},
			videoUrl() {
				return this.data.videoUrl || {};
			},
		},
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="less" scoped>

</style>
